Application 面板是处理持久化数据和浏览器服务的中央控制台。从 Cookie 到 Service Worker，从 LocalStorage 到 IndexedDB，这个面板让你能够检查、修改和管理浏览器端的全部数据存储。
Storage 面板显示了当前网站使用的所有存储的总大小，以及各存储类型的明细：
Clear site data 按钮会清除当前域名的所有存储数据。这等同于：
💡 PWA 调试必用：在调试 Service Worker 更新和缓存策略时，
Clear site data是最干净的重置方式。
选择 Application → Storage → Cookies → 选择域名，你会看到该域名下所有 Cookie 的表格：
| 字段 | 含义 |
|---|---|
| Name | Cookie 名称 |
| Value | Cookie 值（双击可编辑） |
| Domain | 生效域名 |
| Path | 生效路径 |
| Expires / Max-Age | 过期时间 |
| Size | Cookie 大小 |
| HttpOnly | 是否无法通过 document.cookie 访问 |
| Secure | 是否只通过 HTTPS 发送 |
| SameSite | Strict / Lax / None |
| Priority | Low / Medium / High |
| Partition Key | 🆕 CHIPS (Cookies Having Independent Partitioned State) 分区键 |
Chrome 114+ 引入了 CHIPS，Cookie 添加了 Partition Key 字段。分区 Cookie 只能在设置它们的顶级站点上下文中访问，跨站点追踪将无法读取。在 DevTools 中可以通过 Partition Key 列查看 Cookie 的分区归属。
| 特性 | Local Storage | Session Storage |
|---|---|---|
| 生命周期 | 永久（直到手动清除） | 标签页关闭后清除 |
| 跨标签页共享 | ✅ 同源所有标签页 | ❌ 仅当前标签页 |
| 容量 | ~5-10 MB | ~5-10 MB |
| 数据类型 | 字符串 | 字符串 |
💡 在 Console 中直接操作 Storage 更高效：
javascript// 查看所有数据 copy(localStorage) // 复制到剪贴板 // 批量操作 Object.entries(localStorage).filter(([k]) => k.startsWith('app_')) .forEach(([k]) => localStorage.removeItem(k))
选择 Application → IndexedDB → 选择数据库，可以看到：
查看数据：
编辑数据：
Console 中操作 IndexedDB：
// 打开数据库并查看数据
const req = indexedDB.open('MyDatabase', 1)
req.onsuccess = (e) => {
const db = e.target.result
const tx = db.transaction('users', 'readonly')
const store = tx.objectStore('users')
const getAll = store.getAll()
getAll.onsuccess = () => console.table(getAll.result)
}Cache Storage 是 Service Worker Cache API 的存储位置。选择 Application → Cache → Cache Storage：
(ServiceWorker) 表示命中缓存选择 Application → Service Workers，你会看到：
| 按钮/功能 | 作用 |
|---|---|
| Update | 强制触发 Service Worker 更新检测 |
| Unregister | 注销当前 Service Worker |
| Bypass for network | 跳过 Service Worker 直接从网络获取 |
| Show all | 显示注册到该源的所有 Service Worker |
| Update on reload | 每次页面刷新时强制更新 |
| Emulate offline | 🆕 模拟离线环境（用于测试 SW 缓存策略） |
Chrome 130+ 中，点击 Service Worker 面板中的 Inspect 链接，会打开一个专用的 DevTools 窗口，其中包含：
在 Service Worker 的 DevTools 中，可以：
fetch 事件监听器中设置断点event.request 和 event.respondWith 的逻辑Application → Background Services 提供了多种后台服务的调试能力：
| 服务 | 用途 |
|---|---|
| Background Fetch | 大文件后台下载 |
| Background Sync | 网络恢复后延迟发送数据 |
| Notifications | 推送通知 |
| Payment Handler | 支付处理 |
| Periodic Background Sync | 定期后台同步 |
| Push Messaging | 推送消息 |
| Push Subscription | 推送订阅状态 |
点击任意服务类型 → 点击录制按钮 → DevTools 开始记录该类型的所有后台事件。事件日志包含：
Application → Back/Forward Cache 面板可以测试页面是否满足 BFCache 的条件：
Test back/forward cache 按钮Chrome 115+ 中，Application → Interest Groups 面板可以查看和调试 Privacy Sandbox 中的 Interest Groups（兴趣组）。
Chrome 117+ 中，Application → Shared Storage 面板可以查看和调试 Shared Storage API 的数据。
Chrome 117+ 中，Application → Preloading 面板可以调试 Speculation Rules（预测性预加载）的状态（Chrome 120 起更名为 Speculative loads）。
Application → Frames 显示了页面的框架树（包括 iframe），以及每个框架的：
这在调试跨域 iframe 和 CSP 问题时非常有用。
如果页面配置了 Web App Manifest（PWA 的必备要素），Manifest 面板会展示：
Manifest 面板还会检查常见问题，如缺少必填字段、图标尺寸不合适等。